<script>

// 在渲染进程的文件中，例如在 preload.js 或者渲染完成后的某个脚本中
const {ipcRenderer} = require('electron');

export default {
  name: "manage",
  data() {
    return {
      tableData: [],
      filePath: ''
    }
  },
  mounted() {
    this.filePath = localStorage.getItem('filePath')
    this.list()
  },
  methods: {
    async list() {
      this.tableData = await this.$roleDb.get('data').value()
    },
    saveFilePath() {
      localStorage.setItem('filePath', this.filePath)
    },
    async readFile() {
      // 发送数据到主进程
      ipcRenderer.send('interface-name', this.filePath);

// 监听主进程的响应
      ipcRenderer.on('interface-response', (event, arg) => {
        // 名字相同  先过滤出来所有的mp4
        // 在根据名字 去找图片
        let arr = JSON.parse(arg);
        let videos = []
        let imgs = []
        let videoMap = {}
        arr.forEach((item) => {
          let it = item.split('.')
          if (it[1] == 'mp4') {
            videos.push({
              name: it[0],
              videoUrl: this.filePath + '/' + item
            })
            videoMap[it[0]] = videos.length - 1
          } else {
            imgs.push(item)
          }
        })

        imgs.forEach(img => {
          let idx = videoMap[img.split('.')[0]]
          if (videos[idx])
            videos[idx].imgUrl = this.filePath + '/' + img
        })

        this.tableData = videos


        // this.tableData = JSON.parse(arg).map(item => {
        //   let a = item.split('.')
        //
        //   return {
        //     name: a[0],
        //     videoUrl: this.filePath + '/' + item
        //   }
        // })
        this.$roleDb.set('data', this.tableData).write()
      });
    }
  }
}
</script>

<template>
  <div class="role-manage">
    <el-card>
      <el-button size="small" @click="$router.push('/')">返回</el-button>
      <el-row :gutter="10">
        <el-col :span="16">
          <el-input size="small" v-model="filePath" placeholder="placeholder" @change="saveFilePath"></el-input>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" size="small" @click="readFile">读取视频文件</el-button>
        </el-col>
      </el-row>
      <el-table
          ref="table"
          :height="1920/2.5"
          :data="tableData"
          style="width: 100%">
        <el-table-column
            label="角色名称"
            prop="name"
        >
        </el-table-column>
        <el-table-column
            label="图片地址"
            prop="imgUrl"
        >
        </el-table-column>
        <el-table-column
            label="视频地址"
            prop="videoUrl">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row,$index}">
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>

</style>
